<template>
	<view class="login-page">
		<view class="login-wrap">
			<view class="log">
				<view ></view>
				<h2 style="color: rgb(0,139, 250);">欢迎注册</h2>
			</view>
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="username" name="username" 
					label="用户名" placeholder="用户名"
						:rules="[{ required: true, message: '请填写用户名' }]" />
					<van-field v-model="password" type="password" name="password" 
					label="密码" placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]" />
					<van-field v-model="password1" type="password1" name="password1" 					 label="确认密码" placeholder="确认密码"
						:rules="[{ required: true, message: '请填写密码' }]" />
				</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit" size="normal">
						确定
					</van-button>
				</div>
			</van-form>
			<p @click="gologin">已注册?前往登录</p>
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import api from '../../lib/request';
	const username = ref('');
	const password = ref('');
	const password1 = ref('');
	const onSubmit = (values) => {
		let {password1,password} = values
		console.log(password1,password);
		if(password1==password){
			api.post('/user/addUser',values).then(res=>{
				console.log(res);
				let {code} = res
				uni.showToast({
					title: '注册' + (!code ? '失败' : '成功'),
					icon: 'none',
					success: () => {
						// 如果登录成功过1500秒，回到上一页
						if (code) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
							
						}
					}
				})
			})
		}
	};
	const gologin=()=>{
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
</script>

<style>
.login-wrap{
	position: absolute;
	top: 120rpx;
	left: calc(100vw - 350px);
}
.log {
		width: 370rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: auto;

	}
	.log>view{
		width: calc(100vw - 120rpx);
		height: 280rpx;
		background-image: url(../../static/logo.png);
		background-size: 380rpx 380rpx;
		margin-bottom: 20rpx;
	}
.log>h2{
	margin-bottom: 40rpx;
}
p{
	position: absolute;
	right: 40rpx;
	color: #8a8a8a;
}
</style>